<!-- 柱状图组件 -->
<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref(null)
let chart = null

// 示例数据
const chartData = {
  xAxis: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
  values: [120, 200, 150, 80, 70, 110, 130]
}

const initChart = () => {
  if (chartContainer.value) {
    chart = echarts.init(chartContainer.value)

    // 定义渐变色
    const colorGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#ff4d4d' },  // 红色
      { offset: 0.5, color: '#ff9933' }, // 橙色
      { offset: 1, color: '#ffcc00' }    // 黄色
    ])

    const option = {
      backgroundColor: '#ffffff',
      title: {
        text: '周数据统计',
        left: 'center',
        textStyle: {
          color: '#2c3e50',
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#666'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.xAxis,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ddd'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      series: [
        {
          data: chartData.values,
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            color: colorGradient,
            borderRadius: [6, 6, 0, 0]
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff3333' },    // 亮红色
                { offset: 0.7, color: '#ff8000' },  // 深橙色
                { offset: 1, color: '#ffb300' }     // 深黄色
              ])
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.1)',
            borderRadius: [6, 6, 0, 0]
          },
          animationDuration: 1000,
          animationEasing: 'elasticOut'
        }
      ]
    }

    chart.setOption(option)
  }
}

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
div {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>